<template>
  <div class="new-page" :style="`min-height: ${pageMinHeight}px`">
    <div class="table_box">
      <div class="table_header">
          <a-range-picker valueFormat="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss" style="margin-right: 20px;width: 220px;" :showTime="showTime"
              :placeholder="['开始时间', '结束时间']" @change="onChange"/>
          
        <div class="search">
           <selectObj name="" id="" @change="handleChange"></selectObj>
        </div>
        <a-input-search
          placeholder="定位诊断项"
          style="width: 200px"
          v-model="searchData.item"
          @search="onSearch"
        />
      </div>
      <div class="table_content">
        <a-table
          :columns="columns"
          :rowKey="(record) => record.id"
          :data-source="data"
          :pagination="pagination"
          :show-total="total => `Total ${total} items`"
          :loading="loading"
          @change="handleTableChange"
        >
        
        <div slot="level" slot-scope="text, record">
          <div :class="level[record.level].c">
              <span class="iconfont icon-dianchijingbao"></span>
              <span style="margin-left: 5px;">{{level[record.level].n}}</span>
          </div>
        </div>
          <div slot="operation" slot-scope="text, record">
            <a-button
              type="link"
              style="color: #1890ff"
              @click="goupdata(record.id)"
              ghost
            >
              详细分析
            </a-button>
          </div>
        </a-table>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { gets,del } from "@/services";
import { getSearchCriteria } from "@/utils/util"
import selectObj from "@/components/selectObj/selectObj"
import moment from 'moment'
export default {
  name: "Demo",
  components: {
      selectObj
  },
  data() {
    return {
        showTime:{defaultValue:[moment('00:00:00','HH:mm:ss'),moment('23:59:59','HH:mm:ss')]},
      columns: [
        {
          title: "生成预警时间",
          dataIndex: "created_at",
          key: "created_at",
        },
        {
          title: "储能单元",
          key: "e_s_cluster.e_s_unit",
          dataIndex: "e_s_cluster.e_s_unit.name"
        },
        {
          title: "定位",
          key: "e_s_cluster.name",
          dataIndex: "e_s_cluster.name",
        },
        {
          title: "诊断项",
          key: "item",
          dataIndex: "item",
        },
        {
          title: "等级",
          key: "level",
          dataIndex: "level",
          scopedSlots: { customRender: "level" },
        },
        {
          title: "运维建议",
          key: "suggestion",
          dataIndex: "suggestion",
        },
        {
          title: "处理预计效果",
          key: "effect",
          dataIndex: "effect",
        },
        {
          title: "操作",
          dataIndex: "operation",
          scopedSlots: { customRender: "operation" },
        },
      ],
      pagination: {
        pageSize: 10,
      },
      searchData:{
        item:''
      },
      loading: false,
      data: [],
      level:{
          normal:{
              c:'level1',
              n:'正常'
          },
          light:{
              c:'level2',
              n:'轻度'
          },
          moderate:{
              c:'level3',
              n:'中度'
          },
          severe:{
              c:'level4',
              n:'重度'
          },
      },
      esStations:[],
      esStations_id:'',
      esUnits:[],
      esUnits_id:'',
      esClusters:[],
      esClusters_id:'',
      date:[]
    };
  },
  computed: {
    ...mapState("setting", ["pageMinHeight"]),
  },
  created() {
      this.fetch({limit:10})
    // gets({limit:99},'esStations').then(({ data }) => {
    //     if (data.code == 20000) {
    //         let res = data.data;
    //         this.esStations = res.data.map(e=>{
    //             return {
    //                 id:e.id,
    //                 name:e.name
    //             }
    //         })
    //     }
    // });
  },
  methods: {
      handleChange(e){
        let id = e[2]
        if(id){
            this.esClusters_id = id
            this.fetch({limit:10})
        }
      },
      onChange(e){
          this.date = e
          this.onSearch()
      },
      getSearchList(url,name){
          let _this = this
          gets({limit:99},url).then(({ data }) => {
              if (data.code == 20000) {
                  let res = data.data;
                  _this[name] = res.data.map(e=>{
                      return {
                          id:e.id,
                          name:e.name
                      }
                  })
                  console.log(this);
                  _this.$forceUpdate()
              }
          });
      },
    handleTableChange(pagination, filters) {
      console.log(pagination,filters);
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      this.pagination = pager;
      this.fetch({
        page: pagination.current,
        limit: pagination.pageSize,
        ...filters,
      });
    },
    fetch(params = {}) {
      this.loading = true;
      let searchData = {...this.searchData,e_s_cluster_id:this.esClusters_id}
      let date = {}
      if(this.date.length>1){
          date.date_begin = this.date[0]
          date.date_end = this.date[1]
      }
      gets({
        ...params,
        ...date,
        ...(getSearchCriteria(searchData)),
        searchJoin:'and',
      },'earlyAlarms').then(({ data }) => {
        if (data.code == 20000) {
        let res = data.data
        this.data = res.data;
        this.pagination = {
          total: res.total,
        };
      }
        this.loading = false;
      });
    },
    delData(id) {
      let _this = this
      this.$confirm({
        title: "是否确定删除这条数据?",
        content: "数据删除后将无法恢复",
        okText: "确定",
        okType: "danger",
        cancelText: "取消",
        onOk() {
          del(id,'users').then(({ data }) => {
            if (data.code == 20000) {
              _this.$message.success("删除成功");
              console.log(_this.pagination);
              let i = 0;
              if (_this.data.length == 1) {
                i = 1;
              }
              _this.fetch({ limit: 10, page: _this.pagination.current - i });
            }
          });
        },
        onCancel() {
          console.log("Cancel");
        },
      });
    },
    goupdata(id) {
      this.$router.push(`/earlyWarning/details?id=${id}`);
    },
    goadd(){
      this.$router.push(`/account/member/add`);
    },
    onSearch() {
      this.fetch({limit:10})
    },
  },
};
</script>

<style scoped lang="less">
.new-page {
  height: 100%;
  background-color: @base-bg-color;
  text-align: center;
  border-radius: 4px;
  .table_box {
    padding: 16px 23px;
    .table_header {
      display: flex;
      // justify-content: space-between;
      padding-bottom: 24px;
    }
  }
}
.level1{
    color:#16E6FF ;
}
.level2{
    color: #FFE300;
}
.level3{
    color: #FF6600;
}
.level4{
    color: #FF2F4F;
}
</style>